<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="status-item">
				<image src="/static/images/games/shop/coin.png" mode="aspectFit" class="status-icon"></image>
				<text class="status-value">{{shopData.coins}}</text>
			</view>
			<view class="status-item">
				<image src="/static/images/games/shop/level.png" mode="aspectFit" class="status-icon"></image>
				<text class="status-value">Lv.{{shopData.level}}</text>
			</view>
			<view class="status-item">
				<image src="/static/images/games/shop/reputation.png" mode="aspectFit" class="status-icon"></image>
				<text class="status-value">{{shopData.reputation}}</text>
			</view>
		</view>
		
		<!-- 店铺信息 -->
		<view class="shop-info">
			<image :src="shopData.image" mode="aspectFill" class="shop-image"></image>
			<view class="shop-detail">
				<text class="shop-name">{{shopData.name}}</text>
				<text class="shop-desc">{{shopData.description}}</text>
			</view>
		</view>
		
		<!-- 每日任务 -->
		<view class="daily-tasks">
			<view class="section-header">
				<text class="section-title">每日任务</text>
				<text class="task-progress">{{completedTasks}}/{{totalTasks}}</text>
			</view>
			<view class="task-list">
				<view class="task-item" v-for="(task, index) in dailyTasks" :key="index">
					<view class="task-info">
						<image :src="task.icon" mode="aspectFit" class="task-icon"></image>
						<view class="task-detail">
							<text class="task-name">{{task.name}}</text>
							<text class="task-desc">{{task.description}}</text>
						</view>
					</view>
					<view class="task-reward">
						<image src="/static/images/games/shop/coin.png" mode="aspectFit" class="reward-icon"></image>
						<text class="reward-value">+{{task.reward}}</text>
					</view>
					<button class="task-btn" :class="{ 'completed': task.completed }"
						@click="completeTask(task)">
						{{task.completed ? '已完成' : '完成'}}
					</button>
				</view>
			</view>
		</view>
		
		<!-- 店铺升级 -->
		<view class="shop-upgrade">
			<text class="section-title">店铺升级</text>
			<view class="upgrade-grid">
				<view class="upgrade-item" v-for="(item, index) in upgradeItems" :key="index"
					@click="showUpgradeDetail(item)">
					<image :src="item.icon" mode="aspectFit" class="upgrade-icon"></image>
					<text class="upgrade-name">{{item.name}}</text>
					<text class="upgrade-level">Lv.{{item.level}}</text>
					<text class="upgrade-cost">{{item.cost}}金币</text>
				</view>
			</view>
		</view>
		
		<!-- 员工管理 -->
		<view class="staff-management">
			<text class="section-title">员工管理</text>
			<view class="staff-list">
				<view class="staff-item" v-for="(staff, index) in staffList" :key="index">
					<image :src="staff.avatar" mode="aspectFill" class="staff-avatar"></image>
					<view class="staff-info">
						<text class="staff-name">{{staff.name}}</text>
						<text class="staff-role">{{staff.role}}</text>
						<text class="staff-skill">{{staff.skill}}</text>
					</view>
					<view class="staff-status" :class="staff.status">
						<text>{{staff.status === 'working' ? '工作中' : '休息中'}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 好友互动 -->
		<view class="friend-interaction">
			<text class="section-title">好友互动</text>
			<view class="interaction-grid">
				<view class="interaction-item" v-for="(action, index) in friendActions" :key="index"
					@click="handleFriendAction(action)">
					<image :src="action.icon" mode="aspectFit" class="action-icon"></image>
					<text class="action-name">{{action.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 店铺数据
const shopData = ref({
	coins: 1000,
	level: 1,
	reputation: 50,
	name: '川味火锅店',
	description: '正宗川味，麻辣鲜香',
	image: '/static/images/games/shop/store.png'
})

// 每日任务
const dailyTasks = ref([
	{
		name: '接待顾客',
		description: '接待10位顾客',
		icon: '/static/images/games/shop/customer.png',
		reward: 100,
		completed: false,
		progress: 0,
		total: 10
	},
	{
		name: '购买食材',
		description: '购买5种新食材',
		icon: '/static/images/games/shop/ingredient.png',
		reward: 150,
		completed: false,
		progress: 0,
		total: 5
	},
	{
		name: '调配底料',
		description: '调配3种火锅底料',
		icon: '/static/images/games/shop/soup.png',
		reward: 200,
		completed: false,
		progress: 0,
		total: 3
	}
])

// 计算任务完成进度
const completedTasks = computed(() => {
	return dailyTasks.value.filter(task => task.completed).length
})

const totalTasks = computed(() => {
	return dailyTasks.value.length
})

// 升级项目
const upgradeItems = ref([
	{
		name: '店面装修',
		icon: '/static/images/games/shop/decoration.png',
		level: 1,
		cost: 500
	},
	{
		name: '厨房设备',
		icon: '/static/images/games/shop/kitchen.png',
		level: 1,
		cost: 800
	},
	{
		name: '用餐区域',
		icon: '/static/images/games/shop/dining.png',
		level: 1,
		cost: 1000
	}
])

// 员工列表
const staffList = ref([
	{
		name: '张师傅',
		role: '主厨',
		skill: '特制麻辣底料',
		avatar: '/static/images/games/shop/chef.png',
		status: 'working'
	},
	{
		name: '小李',
		role: '服务员',
		skill: '热情服务',
		avatar: '/static/images/games/shop/waiter.png',
		status: 'working'
	}
])

// 好友互动
const friendActions = ref([
	{
		name: '交换食材',
		icon: '/static/images/games/shop/exchange.png'
	},
	{
		name: '分享经验',
		icon: '/static/images/games/shop/share.png'
	},
	{
		name: '邀请好友',
		icon: '/static/images/games/shop/invite.png'
	}
])

// 完成任务
const completeTask = (task) => {
	if (!task.completed) {
		task.completed = true
		shopData.value.coins += task.reward
		uni.showToast({
			title: `获得${task.reward}金币`,
			icon: 'success'
		})
	}
}

// 显示升级详情
const showUpgradeDetail = (item) => {
	uni.showModal({
		title: item.name,
		content: `当前等级：${item.level}\n升级费用：${item.cost}金币\n是否升级？`,
		success: (res) => {
			if (res.confirm && shopData.value.coins >= item.cost) {
				shopData.value.coins -= item.cost
				item.level++
				uni.showToast({
					title: '升级成功',
					icon: 'success'
				})
			} else if (shopData.value.coins < item.cost) {
				uni.showToast({
					title: '金币不足',
					icon: 'none'
				})
			}
		}
	})
}

// 处理好友互动
const handleFriendAction = (action) => {
	switch(action.name) {
		case '交换食材':
			uni.showToast({
				title: '打开好友列表',
				icon: 'none'
			})
			break
		case '分享经验':
			uni.showShareMenu({
				withShareTicket: true
			})
			break
		case '邀请好友':
			uni.showToast({
				title: '生成邀请码',
				icon: 'none'
			})
			break
	}
}
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #F5F5F5;
	min-height: 100vh;
}

.status-bar {
	display: flex;
	justify-content: space-around;
	padding: 20rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
}

.status-item {
	display: flex;
	align-items: center;
}

.status-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.status-value {
	font-size: 28rpx;
	color: #333;
}

.shop-info {
	display: flex;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.shop-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.shop-detail {
	flex: 1;
}

.shop-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.shop-desc {
	font-size: 24rpx;
	color: #666;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.task-progress {
	font-size: 24rpx;
	color: #666;
}

.task-list {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.task-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.task-item:last-child {
	border-bottom: none;
}

.task-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.task-icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
}

.task-detail {
	flex: 1;
}

.task-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 6rpx;
	display: block;
}

.task-desc {
	font-size: 24rpx;
	color: #666;
}

.task-reward {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}

.reward-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 6rpx;
}

.reward-value {
	font-size: 24rpx;
	color: #D02B29;
}

.task-btn {
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 30rpx;
	font-size: 24rpx;
}

.task-btn.completed {
	background-color: #CCCCCC;
}

.upgrade-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.upgrade-item {
	text-align: center;
	padding: 20rpx;
	background-color: #F8F8F8;
	border-radius: 8rpx;
}

.upgrade-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.upgrade-name {
	font-size: 24rpx;
	color: #333;
	margin-bottom: 6rpx;
	display: block;
}

.upgrade-level {
	font-size: 20rpx;
	color: #666;
	margin-bottom: 6rpx;
	display: block;
}

.upgrade-cost {
	font-size: 20rpx;
	color: #D02B29;
}

.staff-list {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.staff-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.staff-item:last-child {
	border-bottom: none;
}

.staff-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.staff-info {
	flex: 1;
}

.staff-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 6rpx;
	display: block;
}

.staff-role {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 6rpx;
	display: block;
}

.staff-skill {
	font-size: 24rpx;
	color: #999;
}

.staff-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.staff-status.working {
	color: #D02B29;
	background-color: #FFE4E4;
}

.staff-status.resting {
	color: #666;
	background-color: #F5F5F5;
}

.interaction-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.interaction-item {
	text-align: center;
	padding: 20rpx;
	background-color: #F8F8F8;
	border-radius: 8rpx;
}

.action-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}

.action-name {
	font-size: 24rpx;
	color: #333;
}
</style> 